<!-- 委外加工待出库单 -->
<template>
	<a-card :bordered="false">
		<div class="table-page-search-wrapper">
			<a-form layout="inline">
				<a-row :gutter="48">
					<a-col :md="6" :sm="24">
						<a-form-item label="采购单号">
							<a-input v-model="queryParam.orderNumber" placeholder="请输入采购单号" />
						</a-form-item>
					</a-col>

					<a-col :md="6" :sm="24">
						<a-form-item label="物料料号">
							<a-input v-model="queryParam.materialCode" placeholder="请输入物料料号" />
						</a-form-item>
					</a-col>
					<el-col :md="6" :sm="6" v-if="cgApplyType == 4">
						<a-form-item label="状 态">							
							<a-radio-group default-value="" button-style="solid" v-model="queryParam.cgDjgCkStatus">
								<a-radio-button value="">全部</a-radio-button>
								<a-radio-button value="1">待出库</a-radio-button>
								<a-radio-button value="2">出库中</a-radio-button>
								<!-- <a-radio-button value="3">己出库</a-radio-button> -->
							</a-radio-group>
						</a-form-item>
					</el-col>
					<a-col :md="5" :sm="24">
						<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
						<a-button style="margin-left: 8px"
							@click="() => { queryParam = {}; $refs.table.refresh(true) }">重置</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>

		<s-table ref="table" :scroll="{ x: 1400, y: 1000 }" style="max-height: 500px;" size="default" :columns="columns"
			:data="loadData" :alert="true" :rowKey="(record) => record.materialId">

			<span slot="cgDjgCkStatus" slot-scope="text, record">
					<span v-if="record.cgDjgCkStatus == 1">待出库</span>
					<span v-if="record.cgDjgCkStatus == 2">出库中</span>
					<span v-if="record.cgDjgCkStatus == 3">已出库</span>
			</span>

			<span slot="action" slot-scope="text, record">
				<a v-if="cgApplyType == 4 && record.cgDjgCkStatus != 3" @click="$refs.addAndEdit.init(record)">去出库</a>
				<a-divider type="vertical"  v-if="cgApplyType == 4 && record.cgDjgCkStatus != 3" />
				<a @click="$refs.addAndEdit1.cklist(record)">出库记录</a>
				<a-divider type="vertical" />
				<a @click="$refs.addAndEdit1.ckdetails(record)">出库明细</a>
			</span>
		</s-table>
		<add-and-edit ref="addAndEdit" @ok="handleOk" />
		<add-and-edit1 ref="addAndEdit1" @ok="handleOk" />
	</a-card>
</template>

<script>
import { STable } from '@/components'
import { page } from '@/api/modular/main/emsorder/emsOrderManage'

import addAndEdit from './addAndEdit.vue';
import addAndEdit1 from './addAndEdit1.vue';

export default {
	components: {
		STable,
		addAndEdit,
		addAndEdit1
	},
	mounted() {

	},
	data() {
		return {
			columns: [
				{
					align: 'center',
					title: '序号', width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					align: 'center',
					title: '采购单号',
					dataIndex: 'orderNumber'
				},
				{
					align: 'center',
					title: '状态',
					dataIndex: 'cgDjgCkStatus',
					scopedSlots: { customRender: 'cgDjgCkStatus' }
				},
				{
					align: 'center',
					title: '创建时间',
					dataIndex: 'createTime'
				},
				{
					align: 'center',
					title: '操作',
					dataIndex: '',
					width: '360px',
					scopedSlots: { customRender: 'action' }
				}
			],
			queryParam: {

			},  // 查询参数
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				this.queryParam.orderType = this.orderType;
				this.queryParam.materialType = this.materialType;
				this.queryParam.subOrderType = 2;
				this.queryParam.cgApplyType = this.cgApplyType;
				return page(Object.assign(parameter, this.queryParam)).then((res) => {
					return res.data
				})
			},
		}
	},	
	computed: {
		materialType() {
			let viewState = this.routePath.viewState
			return this.$businessEnum.MATERIAL_TYPE_ENUM[viewState].id
		},
		orderType() {
			return this.routePath.orderType
		},
		cgApplyType() {
			return this.routePath.cgApplyType
		},
		executeStatus() {
			return this.routePath.executeStatus
		},
		routePath() {
			let urlParam = this.$util.getUrlParam(this.$route.path)
			return urlParam
		},
	},
	watch: {
		routePath() {
			this.$refs.table.refresh()
		}
	},
	created() {

	},
	methods: {
		handleOk() {
			this.$refs.table.refresh()
		},
	},
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}

.table-image {
	cursor: pointer;
	max-width: 100px;
	max-height: 50px;
	border: solid 1px #cccccc;
}

.low-value {
	color: red;
}

image {
	width: 45px;
	height: 45px;
}
</style>
